<!-- 异地备份 -->
<template>
    <div>
        <el-card class="box-card"  shadow="never">
        <div slot="header" class="clearfix">
          <span class="sign">I</span>
          <span class="sign-title">异地备份（参数配置成功后重启设备才能生效）</span>
          <el-button style="float: right; padding:4px 8px;margin-left:5px;" type="primary" @click="confirmClick('ruleForm')">保存</el-button>
          <el-button style="float: right; padding:4px 8px;" type="primary"  :disabled='ruleForm.MailCenterStatus===false' @click="sendClick('ruleForm','StartPerf')">开启测试服务</el-button>
        </div>
        <div>
          <el-form :model="ruleForm" :rules="ruleForm.MailCenterStatus === false ? {} : rules" ref="ruleForm" label-width="30%">
            <el-row :gutter="24">
                <el-col :sm="24" :md="24" :lg="24">
                    <el-form-item  label="异地备份服务器：">
                        <el-switch v-model="ruleForm.IsValid" style="margin-right:10px;" @change='statusClick' :active-value="1" :inactive-value="0"></el-switch>
                        使用端口号：<el-input style="width:70px !important;" :disabled="ruleForm.IsValid===0" size="small" v-model.number="ruleForm.RsyncPort"></el-input>
                    </el-form-item>
                </el-col>
             
                <el-col :sm="24" :md="24" :lg="24">
                    <el-form-item  label="虚拟服务器地址：">
                        <el-switch v-model="ruleForm.IsStartVPNNode" :disabled="ruleForm.IsValid===0" :active-value="1" :inactive-value="0"></el-switch>
                        <span class="text-style">（通过p2p异地备份模式才需要开启）</span>
                    </el-form-item>
                </el-col>
                <el-col :sm="24" :md="24" :lg="24">
                  <el-form-item  label="中心节点：" >
                      <el-input :disabled="ruleForm.IsStartVPNNode===0" size="small" placeholder="请输入中心节点地址" v-model="ruleForm.SuperNode"></el-input>
                      <span class="text-style">（请在运维人员指导下填写）</span>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="24" :lg="24">
                  <el-form-item  label="分组名称：" >
                    <el-input size="small" v-model="ruleForm.Group" placeholder="请输入分组名称" :disabled='ruleForm.IsStartVPNNode===0'></el-input>  
                    <span class="text-style">（请尽量填写唯一标识）</span>
                  </el-form-item>
                </el-col>
                <el-col :sm="24" :md="24" :lg="24">
                    <el-form-item  label="虚拟地址：">
                        <el-input size="small" v-model="ruleForm.VpnIP" placeholder="请输入虚拟地址" :disabled='ruleForm.IsStartVPNNode===0'></el-input>  
                        <span class="text-style">（请保证与其他节点地址不重复）</span>
                    </el-form-item>
                </el-col>
                <el-col :sm="24" :md="24" :lg="24" >
                  <el-form-item  label="传输秘钥：">
                        <el-input size="small" v-model="ruleForm.Key" placeholder="请输入传输秘钥" :disabled='ruleForm.IsStartVPNNode===0'></el-input>  
                        <span class="text-style">（如果没有传输加密需求请填写为空，否则会影响备份效率）</span>
                  </el-form-item>
                </el-col>
            </el-row>
          </el-form>    
        </div>
        <div>

        </div>
      </el-card>
    </div>
</template>

<script>
import { connrequest } from "@/api/firstPage";
export default {
    data(){
        return{
            ruleForm:{
              IsValid: 0,
              RsyncPort: 0,
              IsStartVPNNode: 0,
              VpnIP: '',
              Group: '',
              SuperNode: '',
              Key: ''
            }
        }
    },
    created(){
      this.getData();
    },
    methods:{
        async getData(){
            const res = await connrequest('GetParamBackupMain');
            this.ruleForm = res.Data;
        },
        confirmClick(formName){
            this.$refs[formName].validate(async(valid) => {
                if (valid) {
                    const data = {
                        Data : this.ruleForm
                    };
                    const res = await connrequest('SetParamBackupMain',data);
                    if (res.Status.StatusCode === 0) {
                        this.$message.success('保存成功');
                        this.getData();
                    }
                }
            })     
        },
        sendClick(formName,status){
          this.$refs[formName].validate(async(valid) => {
              if (valid) {
                const data = {
                  Data:{
                    Action: status
                  }
                }
                const res = await connrequest('ExecDeviceMaint', data)
                if(res.Status.StatusCode === 0) {
                  this.$alert(res.Data.result, '', {
                    confirmButtonText: '确定',
                    callback: action => {
                      this.$message({
                        // type: 'info',
                        message: ``
                      });
                    }
                  });
                  // this.$message.success(res.Data.result)
                }
              }
          })    
        }
    }
}
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}
.box-card{
  // margin: 16px;
  margin-bottom: 16px !important;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
::v-deep.el-input--small{
    width:40% !important;
}
::v-deep.el-card__header{
  padding: 10px !important;
}
.el-form-item{
  margin-bottom: 10px !important;
}
::v-deep.el-form-item__error{
  padding-top:  0 !important;
}
.text-style{
    color:red;
    margin-left:10px;
}
</style>